<template>
  <div class="App">
    <h1 class="content">App组件</h1>
    <!-- 如果想要在模板中对一个数据使用过滤器，请在数据后使用一个管道符，后边添加过滤器
    过滤器可以连续使用
    过滤器可以在使用的时候传递参数，在定义过滤器的时候，使用第二个参数接收 -->
    <p>当前用户访问量：{{ usersNum | splitNumsComma }}</p>
    <p>价格1：{{ price1 | priceFormat(2) | add$ }}</p>
    <p>价格2：{{ price2 | priceFormat(3) | add$ }}</p>
    <Count />
  </div>
</template>

<script>
import Count from "@/components/Count";
export default {
  name: "App",
  components: {
    Count,
  },
  data() {
    return {
      count: 0,
      usersNum: 14567352368682,
      price1: 12,
      price2: 14.1,
      price3: 18.98,
    };
  },
  filters: {
    splitNumsComma(value) {
      const reg = /(\d)(?=(\d{3})+$)/g;
      return String(value).replace(reg, "$1,");
    },
  },
};
</script>

<style></style>
